<!--
 * @description: 新增营销中心链接
 * @Author: latiao
 * @Date: 2021-11-10 14:36:19
 * @LastEditors: latiao
 * @LastEditTime: 2022-04-20 13:36:25
-->
<template>
  <!-- 活动营销 -->
  <div>
    <el-table :data="tableData" height="369">
      <el-table-column label="页面名称" prop="name"></el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-radio
            v-model="selectId"
            @change="selectHandle"
            :label="scope.row.id"
          >
            <span></span>
          </el-radio>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, PropSync, Watch } from "vue-property-decorator";
import LinkSelectItem, { typeNameMap } from "./LinkSelectItem";
/** 活动营销 link数据的id和type值不允许更改 */
@Component
export default class ActivityMarket extends Vue {
  @PropSync("link", {
    type: Object,
    default: () => {
      return {
        id: null,
        type: null,
        name: "",
        url: "",
        append: "",
      };
    },
  })
  linkSelectItem: LinkSelectItem;

  @Prop({
    type: Boolean,
  })
  visible: boolean;

  name = "ActivityMarket";

  selectId: string | number = null;
  // 前台分包subcontract下的目录文件 不需要subcontract前缀
  tableData: LinkSelectItem[] = [
    {
      id: 1,
      type: 4,
      name: "积分商城",
      url: "/subcontract/pages/integralShop/integralShop",
      append: "integral",
    },
    // {
    //   id: 2,
    //   type: 4,
    //   name: "分销中心",
    //   url: "",
    //   append: "",
    // },
    {
      id: 3,
      type: 4,
      name: "领券中心",
      url: "/subcontract/pages/coupon/couponCenter/couponCenter",
      append: "",
    },
    {
      id: 4,
      type: 4,
      name: "我的优惠券",
      url: "/subcontract/pages/coupon/coupon",
      append: "",
    },
    {
      id: 11,
      type: 4,
      name: "会员中心",
      url: "/subcontract/pages/member/member",
      append: "",
    },
    {
      id: 12,
      type: 4,
      name: "直播营销",
      url: "/subcontract/pages/live/live",
      append: "live",
    },
    {
      id: 13,
      type: 4,
      name: "社群接龙",
      url: "/subcontract/pages/chainDetail/chainDetail",
      append: "chain",
    },
    {
      id: 14,
      type: 4,
      name: "回收返券",
      url: "/subcontract/pages/recycling/recycling",
      append: "",
    },
    {
      id: 15,
      type: 0,
      name: "分销中心",
      url: "/subcontract/pages/distributionCenter/distributionCenter",
      append: "",
    },
  ];

  mounted() {
    // 初始相同设为选中状态
    if (this.sameJudge()) {
      this.selectId = this.linkSelectItem.id;
    }
  }

  // 监听父弹窗显隐
  @Watch("visible")
  handleVisibleChange(v) {
    if (v) {
      // 初始相同设为选中状态
      if (this.sameJudge()) {
        this.selectId = this.linkSelectItem.id;
      }
    }
  }

  selectHandle() {
    const selectId = this.selectId;
    const currentItem: LinkSelectItem = this.tableData.find(
      item => item.id === selectId,
    );
    Object.assign(this.linkSelectItem, currentItem);
  }

  sameJudge(): boolean {
    return (
      typeNameMap[this.linkSelectItem.type] &&
      typeNameMap[this.linkSelectItem.type].name === this.name
    );
  }
}
</script>
